<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Adressbuch</title>
  <style type="text/css">
    a { color: #000; }
    a:hover { text-decoration: none; }
    body { background-color: #EEE; }
    div { float: left; }
    table {
      width: 100%;
      margin: auto;
      border-collapse: collapse;
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 12px;
    }
    td {
      padding: 3px;
      vertical-align: top;
    }
    ul { padding-left: 30px; }

    .bg {
      color: #FFF;
      background-color: #95B1CF;
    }
    .pseudolink:hover {
      background-color: #EEE;
      cursor: pointer;
    }

    #layout {
      max-width: 800px;
      background-color: #FFF;
      background-image: url(design/colgrad.png);
      background-repeat: no-repeat;
      background-position: left bottom;
    }
    #layout td { border: 1px solid #BBB; }
    #layout h4 {
      margin: 1px;
      margin-top: 10px;
      margin-bottom: 5px;
      padding: 1px;
      text-align: center;
    }
    #layout ul { margin: 0px; }
    #menu div {
      padding: 5px;
      text-align: center;
    }
    #books { width: 150px; }
    #books li {
      padding-left: 3px;
      list-style-image: url(design/x-office-address-book.png);
    }
    #search { text-align: right; }
    #contacts div, #card div { width: 50%; }
    #contacts td { border:0px; }
    #clistContainer {
      width: 100% !important;
      height: 300px;
      overflow: auto;
    }
    #card h2 { margin: 0px; }
  </style>
</head>
<body>
  <table id="layout" summary="Layout">
    <tr>
      <td id="menu" colspan="2">
        <div>
          <img src="design/address-book-new.png" alt="New Book" /><br />
          Neues Adressbuch
        </div>
        <div style="border-right: 1px solid #BBB">
          <img src="design/contact-new.png" alt="New Contact" /><br />
          Neuer Kontakt
        </div>
        <div>
          <img src="design/document-properties.png" alt="Edit Contact" /><br />
          Kontakt editieren
        </div>
        <div>
          <img src="design/edit-delete.png" alt="Delete Contact" /><br />
          Kontakt l&ouml;schen
        </div>
      </td>
    </tr>
    <tr>
      <td id="books" rowspan="3">
        <h4>Adressb&uuml;cher</h4>
        <ul>
          <li class="pseudolink">Kontakte</li>
        </ul>
      </td>
      <td id="search">
        <img src="design/system-search.png" alt="Search" title="Search" />
        <input type="text" title="Search" />
      </td>
    </tr>
    <tr>
      <td id="contacts">
        <div><h4>Name</h4></div>
        <div><h4>Mail</h4></div><br />
        <div id="clistContainer">
          <table id="clist" summary="List of Contacts in current Book"></table>
        </div>
      </td>
    </tr>
    <tr style="height: 300px">
      <td id="card">
        <h2>Visitenkarte von Johannes Kissel</h2>
        <div>
          <h4 class="bg">Kontakt</h4>
          <ul>
            <li>Anrede: Herr</li>
            <li>Name: Johannes Kissel</li>
            <li>Spitzname: django</li>
            <li>Mail: <a href="mailto:django_k@gmx.de">django_k@gmx.de</a></li>
            <li>Zus&auml;tzliche Mail: <a href="mailto:johannes.kissel@gmx.net">johannes.kissel@gmx.net</a></li>
          </ul>
        </div>
        <div>
          <h4 class="bg">Adresse (Arbeit)</h4>
          <ul>
            <li>Forschungszentrum Karlsruhe GmbH</li>
            <li>Institut f&uuml;r Prozessdatenverarbeitung und Elektronik</li>
            <li>Hermann-von-Helmholtz-Platz 1</li>
            <li>76344 Eggenstein-Leopoldshafen (Ba-W&uuml;)</li>
            <li>Deutschland</li>
            <li><a href="http://www.fzk.de">www.fzk.de</a></li>
          </ul>
        </div>
        <div>
          <h4 class="bg">Adresse (Privat)</h4>
          <ul>
            <li>Nancystr. 4 / D 106</li>
            <li>76187 Karlsruhe (Ba-W&uuml;)</li>
            <li>Deutschland</li>
            <li><a href="http://pix-nw.de">pix-nw.de</a></li>
          </ul>
        </div>
        <div>
          <h4 class="bg">Telefon</h4>
          <ul>
            <li>Privat: 06324 / 5913200</li>
            <li>Arbeit: 07247 / 822409</li>
            <li>Handy: 0174 / 5283753</li>
            <li>Fax: 07247 / 822409</li>
          </ul>
        </div>
        <div>
          <h4 class="bg">Sonstiges</h4>
          Test<br />
          Bla
        </div>
      </td>
    </tr>
  </table>
</body>
</html>